<template>
  <div class="datepicker-item-root">
    <div class="head">
      <div class="label" @click="monthSub">&lt;</div>
      <div class="content">{{dateText}}</div>      
      <div class="label" @click="monthAdd">&gt;</div>
    </div>
    <div class="dateHead">
      <div class="item">日</div>
      <div class="item">一</div>
      <div class="item">二</div>
      <div class="item">三</div>
      <div class="item">四</div>
      <div class="item">五</div>
      <div class="item">六</div>
    </div>
    <div class="dateBody">
      <div class="item" v-for="n in dayPadding"></div>
      <div v-for="n in daysInMonth" 
        class="item" 
        :class="{active: n == date}" 
        @click="changeDate(n)">
        <div class="cont">{{n}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'date-picker-item',
  data(){
    return {
      dayPadding: 0,
      daysInMonth: 0,
      date: 0,
      dateText: '',
      time: moment().startOf('day')
    }
  },
  props: ['value'],
  mounted(){
    this.value && (this.time = moment(this.value, 'YYYY-MM-DD').startOf('day'))
    this.update()
  },
  methods: {
    update(){
      this.date = this.time.date()
      this.dayPadding = this.time.clone().startOf('month').day()
      this.daysInMonth = this.time.daysInMonth()
      this.dateText = this.time.format("YYYY年MM月")
      this.upmodel()
    },
    upmodel(){
      this.$emit('input', this.time.format("YYYY-MM-DD"))
    },
    changeDate(n){
      if(this.date != n){
        this.date = n
        this.time.date(n)
        this.upmodel()
      }
    },
    monthSub(){
      this.time.subtract(1, 'month')
      this.update()
    },
    monthAdd(){
      this.time.add(1, 'month')
      this.update()
    }
  }
}
</script>

<style scoped lang="stylus">
.datepicker-item-root
  user-select none

.head
  display flex
  padding 0 30px
  font-size 14px
  color #cdd4e2
  line-height 40px
  font-family consolas, "Microsoft Yahei"
  text-align center
  margin-bottom 5px
  >.label
    font-size 20px
    width 20px
    cursor pointer
  >.content
    flex auto
    letter-spacing 2px

.dateHead
.dateBody
  display flex
  font-size 12px
  >.item
    height 30px
    text-align center
  >:nth-child(7n+1)
    color #59b3ff
  >:nth-child(7n)
    color #59b3ff

.dateHead
  >.item
    flex auto
    
.dateBody
  flex-wrap wrap
  >.item
    flex 0 0 14.2%
    >.cont
      width 50%
      display inline-block
      cursor pointer
      transition background .3s ease
  >.item.active
    >.cont
      background #59b3ff
      color white
      cursor default

</style>